import React, { useEffect, useState } from 'react'

import Api from '../../api.js'

import BannerTop from '../../components/banner'
import Tabbar from '@/components/tabbar/tabbar'
import MusicList from '@/components/music-list/music-list'
import TitleAllow from '@/components/title-allow'
import BetterScrolls from '@/components/better-scrolls/better-scrolls'

import './music.scss'

const Music = (props) => {
  const { getBannerMusicRoom, musicList, bannerMusicRoom, musicRecommendMove, jumpOriginalDetailWithId } = props

  const [highquality, setHighquality] = useState([])

  useEffect(() => {
    Api.getHighquality({ limit: 10 }).then(res => {
      const { result = [] } = res
      setHighquality([...result])
    })
  }, [])
  const jumpDetail = (id) => {
  
    // const history = useHistory();
    // history.push('/originalDetail/' + id)
    jumpOriginalDetailWithId(id)
  }

  const tabbarData = [
    {
      id: 1,
      text: '歌手',
      icon: 'icon-geshou',
    },
    {
      id: 2,
      text: '排行',
      icon: 'icon-biaoqiankuozhan_paihang-128',
    },
    {
      id: 3,
      text: '分类歌单',
      icon: 'icon-fenlei',
    },
    {
      id: 4,
      text: '音乐电台',
      icon: 'icon-diantai',
    },
    {
      id: 5,
      text: '直播',
      icon: 'icon-15',
    }
  ]

  // 渲染甄选
  const renderMiddleBanner = () => {
    return (
      <div>
        <TitleAllow title={'热门歌单'} />
        <div className='banner-middle'>
          {
            highquality && Array.isArray(highquality) && highquality.map(item => {
              return <div className='banner-middle-item' onClick={() => jumpDetail(item.id)}>
                <img src={ item.picUrl } className='banner-middle-img' />
                <p className='banner-middle-name'>{ item.name }</p>
              </div>
            })
          }
        </div>
      </div>
    )
  }

  // 渲染推荐MV
  const renderMusicRecommendMove = () => {
    return (
      <div className='move-box'>
        {
          musicRecommendMove && Array.isArray(musicRecommendMove) && musicRecommendMove.map(item => {
            return <div key={item.cover} className='move-box-item'>
              <img src={ item.cover } className='move-box-item-img' />
              <div className='move-box-item-name'>
                <span>{ item.name }</span>
                <i className='iconfont icon-yinle1 move-box-item-name-icon'></i>
              </div>
            </div>
          })
        }
      </div>
    )
  }

  return (
    <BetterScrolls pull={getBannerMusicRoom}>
      <div className='music-room'>
        <div className='music-room-box'>
          <BannerTop data={bannerMusicRoom} />
          <Tabbar tabbarData={tabbarData}/>
          { renderMiddleBanner() }
          <TitleAllow title={'最新MV'} showMore={true} moreText={'更多MV'} />
          { renderMusicRecommendMove() }
          <TitleAllow title={'推荐列表'} showMore={true} moreText={'更多推荐'} />
          <div className='music-list'>
            <MusicList data={ musicList } />
          </div>
        </div>
      </div>
    </BetterScrolls>
  )
}

export default Music